<template>
	<view class="shop">
		<!-- 顶部导航框 -->
		<nav-bars backState="1000" bgColor="transparent" fontColor="#fff" title="商品清单"></nav-bars>

		<!-- 顶部背景 -->
		<view class="s_bg"></view>

		<!-- 商品数据 -->
		<view class="s_data">
			<view v-for="(items,indexs) in list" :key="indexs">
				<view class="s_dList">
					<view class="s_dTitle">
						<view class="s_dNums">共{{items.medical_list.length}}件</view>
						<text>{{items.cate_name}}</text>
					</view>
					<view class="s_dItems">
						<view v-for="(item,index) in items.medical_list" :key="index">
							<view class="s_dItem">
								<view class="s_dImg" @click="toProduct(item.product_id)">
									<image :src="item.main_imgurl"></image>
								</view>
								<view class="s_dCont">
									<view class="s_dCan" @click="toProduct(item.product_id)">
										<view class="s_dName omit-2">{{item.product_title}}</view>
										<view class="s_dShop omit-1">{{item.store_name}}</view>
									</view>
									<view class="s_dPrice">¥{{item.price}}</view>
									<view :id="'carItem' + item.product_id" class="s_dCar" @click="showSizePop(item)">
										<view class="iconfont icon-shopping"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="into_shopcart">
			<view class="into_shopcart_box">
				<!-- 左边小图标 -->
				<view class="into_icon" @click="malldcart">
					<view class="carticon">
						<image src="https://manager.ryz1620.com/static/demo/anlie.png"></image>进入购物车
					</view>
				</view>
				<!-- 右边按钮 -->
				<view class="into_btn">
					<!-- 去结算 -->
					<view class="into_settlement" @click="allcart()"><text>一键加入购物车</text></view>
				</view>
			</view>
		</view>
		<!-- 弹窗-规格 -->
		<view class="Size" v-if="sizePop" @touchmove.stop.prevent>
			<view class="S_bg"></view>
			<view class="S_box">
				<view class="S_bCloak" @tap="hideSizePop"></view>
				<view class="S_bContain">
					<view class="S_bClose" @tap="hideSizePop">
						<view class="S_bcIcon"><text class="iconfont icon-cancel"></text></view>
					</view>
					<view class="S_bInfo">
						<view class="S_biHead">
							<image :src="cartdata.main_imgurl" mode="aspectFit"></image>
						</view>
						<view class="S_biCan">
							<view class="S_biRe">{{cartdata.product_title}}</view>
							<view class="S_biRemark">店铺：{{cartdata.cate_name}}</view>
							<view class="S_biFee">¥<text>{{cartdata.price}}</text></view>
						</view>
					</view>
					<scroll-view class="S_bConfig" scroll-y>
						<view class="S_bcCan">
							<view class="S_bcGroup" v-for="(items,index1) in cartdata.parameter" :key="index1">
								<view class="S_bcTit">{{items.specifs}}</view>
								<view class="S_bcChecks">
									<view class="S_bcCheck" v-for="(item,index2) in items.child" :key="index2"
										@click="checkedEvent(item,index1)" :class="{'checked':item.checked}">
										{{item.specif}}</view>
								</view>
							</view>
							<view class="S_bcGroup">
								<view class="S_bcTit">数量</view>
								<view class="S_bcNums">
									<view class="S_bcMinus" @click="minusSizeCart"></view>
									<view class="S_bcNum">{{sizeNum}}</view>
									<view class="S_bcAdd" @click="addSizeCart"></view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="S_bBtns">
						<view class="S_bbBtn1" @click="addCart" style="width: 100%;">加入购物车</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 浮窗按钮 -->
		<!-- <view class="s_fixed">
			<view class="s_fBtn" id="car" @click="malldcart">
				<view class="s_fcIcon"><image src="/static/common/icon_fixed3.png"></image></view>
				<view class="s_fcNum" v-if="num > 0">{{num}}</view>
				<view class="s_fcTxt">购物车</view>
			</view>
		</view> -->

		<view class="s_addCar" :animation="carAnimationData_vertical"
			:style="{'top': carItemY + 'px', 'left': carItemX + 'px'}">
			<view class="s_addCar-can" :animation="carAnimationData_across"></view>
		</view>

		<view class="s_addCar">
			<fly-in-cart class="inCart" ref="inCart" :cartBasketRect="cartBasketRect"></fly-in-cart>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import flyInCart from "@/components/flyInCart/flyInCart.vue"
	import service_design from '@/service/design'
	import service_mall from '@/service/mall.js'
	export default {
		data() {
			return {
				list: [],
				num: 0,
				carItemX: 0,
				carItemY: 0,
				carItemShow: false,
				caseId: '',
				sku_id: '',
				// 规格
				sizePop: false,
				sizeImage: null, // 规格图片
				sizePrice: null, // 规格价格
				sizeNum: 1,
				cartdata: '',
			}
		},

		components: {
			navBar,
			flyInCart
		},

		onLoad(params) {
			this.$utils.getUrl()
			// console.log(decodeURIComponent(params.id))
			var id = decodeURIComponent(params.id)
			this.caseId = id
			// var id = '70x110-SK-047,8620472,逸格-A边框墙板-800宽,逸格-A边框墙板-800宽,逸格-A边框墙板-800宽,电话微信13397888677,ECS044987,2723,2724,314195,1072'
			// this.caseId = '70x110-SK-047,8620472,逸格-A边框墙板-800宽,逸格-A边框墙板-800宽,逸格-A边框墙板-800宽,电话微信13397888677,ECS044987,2723,2724,314195,1072'
			this.getList(id)
		},


		methods: {
			addCar(event, domId) {
				this.num += 1
				this.$refs.inCart.addToCart(event, domId)
			},

			getList(id) {
				service_mall.designSingle({
						id_lst: id
					})
					.then(res => {
						if (res.code == 1) {
							console.log(res.data)
							let data = res.data
							// 
							data.forEach((item,index)=>{
								item.medical_list.forEach((items,indexs)=>{
									items.parameter = JSON.parse(items.parameter)
									// items.sku = []
									// console.log(itemsList);
								})
							})
							this.list = data
						}
					})
			},
			// 弹窗-规格
			// showSizePop() {
			// 	this.sizePop = true
			// },
			hideSizePop() {
				this.sizePop = false
			},
			// 弹窗-规格
			showSizePop(item) {
				this.cartdata = item
				this.sizeNum = 1
				this.sizePop = true
			},
			// 添加数量
			addSizeCart() {
				this.sizeNum++
			},
			// 商品详情
			toProduct(e) {
				uni.navigateTo({
					url: `/pages_mall/pages/mall/goods_details/goods_details?id=${e}`
				})
			},
			// 购物车
			malldcart() {
				uni.navigateTo({
					url: `/pages_mall/pages/mall/cart/cart`
				})
			},
			// 删减购物车-规格弹窗
			minusSizeCart() {
				if (this.sizeNum > 1) this.sizeNum--
			},
			//选择规格
			checkedEvent(data, index1) {
				if (data.checked) {
					this.$set(data, "checked", false)
				} else {
					this.cartdata.parameter[index1].child.map(item => {
						this.$set(item, "checked", false)
					})
					this.$set(data, "checked", true)
					this.get_keys()
				}
			},
			get_keys() {
				let keys = [];
				this.cartdata.parameter.map((item1, index1) => {
					let checkedItem = item1.child.find(r => r.checked)
					if (checkedItem) {
						keys.push({
							key: item1.specifs,
							value: checkedItem.specif
						})
					}
				})
				this.keys = keys
				let sku = this.cartdata.sku
				for (let i = 0; i < sku.length; i++) {
					if (JSON.stringify(sku[i].attribute) == JSON.stringify(keys)) {
						this.sku_id = sku[i].sku_id
						this.cartdata.price = sku[i].price
						this.cartdata.rate_price = sku[i].rate_price
						this.cartdata.stockNum = sku[i].num
					}
				}
			},
			// 一键加入购物车
			allcart() {
				let id_lst = []
				this.list.forEach(item => {
					for (let i = 0; i < item.medical_list.length; i++) {
						id_lst.push(
							item.medical_list[i].product_id
						)
					}
				})
				console.log(id_lst)
				let list = id_lst.join()
				service_mall.goods_all({
						id_lst: list
					})
					.then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: "添加购物车成功",
								icon: "success"
							})
						}
					})
			},
			// 添加购物车
			addCart() {
				// 先判断库存是否足够
				if (this.cartdata.stockNum < this.sizeNum) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					})
					return
				}
				let token = uni.getStorageSync('token');
				if (!token) {
					uni.navigateTo({
						url: '/pages_login/pages/login/login/index',
					});
				}
				if (this.cartdata.specs_type == 1 && this.cartdata.sku.length > 0) { //单
					this.sku_id = this.cartdata.sku[0].sku_id
				}
				if (this.cartdata.specs_type == 2 && !this.sku_id) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none',
						duration: 2000
					});
					return
				}

				service_mall.goods_getadd({
						product_id: this.cartdata.product_id,
						type: 1,
						sku_id: this.sku_id,
						num: this.sizeNum || 1
					})
					.then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: "添加购物车成功",
								icon: "success"
							})
							this.sizePop = false
						}
					})
				// // 先判断库存是否足够
				// if (this.cartdata.stockNum  < this.sizeNum) {
				// 	uni.showToast({ title: '库存不足', icon: 'none' })
				// 	return
				// }
				// let token = uni.getStorageSync('token');
				// if(!token){
				// 	uni.navigateTo({
				// 		url: '/pages_login/pages/login/login/index',
				// 	});
				// }
				// if(this.cartdata.specs_type == 1 && this.cartdata.sku_lst.length>0){//单
				// 	this.sku_id = this.cartdata.sku_lst[0].sku_id
				// }
				// if(this.cartdata.specs_type == 2 && !this.sku_id){
				// 	uni.showToast({
				// 	    title: '请选择规格',
				// 		icon: 'none',
				// 	    duration: 2000
				// 	});
				// 	return
				// }
				
				// service_mall.goods_getadd({product_id:this.cartdata.product_id,type:1,sku_id:this.sku_id,num:this.sizeNum || 1})
				// 	.then(res => {
				// 		if (res.code == 1) {
				// 		  uni.showToast({ title: "添加购物车成功", icon: "success" })
				// 		  this.CartList()
				// 		  this.sizePop = false
				// 		}
				// })	
			},

		}
	}
</script>

<style lang="scss" scoped>
	// .s_addCar {
	// 	width: 52rpx;
	// 	height: 52rpx;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 100;
	// 	.s_addCar-can {
	// 		width: 52rpx;
	// 		height: 52rpx;
	// 		line-height: 52rpx;
	// 		text-align: center;
	// 		font-size: 24rpx;
	// 		border-radius: 50%;
	// 		background: #f9f6f3;
	// 	}
	// }
	.s_addCar {
		position: relative;
		z-index: 1000;
	}


	.shop {
		position: relative;
	}

	// 顶部背景=====
	.shop .s_bg {
		width: 100vw;
		height: 500rpx;
		background: linear-gradient(181deg, #181f2b 0%, #f6f7fb 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 51;
	}


	// 商品数据=====
	.shop .s_data {
		padding: 0 32rpx 40rpx;
		position: relative;
		z-index: 52;
		padding-bottom: 130rpx;
	}

	.shop .s_data .s_dList {
		padding: 40rpx;
		margin-top: 40rpx;
		border-radius: 16rpx;
		background: #fff;
	}

	.shop .s_data .s_dTitle {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.shop .s_data .s_dNums {
		font-size: 24rpx;
		font-weight: normal;
		float: right;
	}

	.shop .s_data .s_dItems {
		padding-top: 20rpx;
	}

	.shop .s_data .s_dItem {
		margin-top: 40rpx;
		overflow: hidden;
		position: relative;
	}

	.shop .s_data .s_dImg {
		width: 178rpx;
		height: 178rpx;
		margin-right: 28rpx;
		border-radius: 8rpx;
		background: #f6f7fb;
		overflow: hidden;
		float: left;
	}

	.shop .s_data .s_dCont {
		overflow: hidden;
	}

	.shop .s_data .s_dCan {
		min-height: 122rpx;
	}

	.shop .s_data .s_dName {
		min-height: 40rpx;
		line-height: 40rpx;
	}

	.shop .s_data .s_dShop {
		height: 34rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #939393;
		margin-top: 8rpx;
	}

	.shop .s_data .s_dPrice {
		height: 44rpx;
		line-height: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 12rpx;
	}

	.shop .s_data .s_dCar {
		width: 52rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		color: #a58f6d;
		font-size: 32rpx;
		border-radius: 50%;
		background: #f9f6f3;
		position: absolute;
		top: 126rpx;
		right: 0;
	}

	// 弹窗-规格
	.Size {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;

		.S_bg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .8);
		}

		.S_box {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-flow: column;
		}

		.S_bCloak {
			height: 176rpx;
		}

		.S_bContain {
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			flex: 1;
		}

		.S_bClose {
			width: 104rpx;
			height: 120rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.S_bcIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000;
				font-size: 20rpx;
				border-radius: 50%;
				background: #f9f6f3;
			}
		}

		.S_bInfo {
			padding: 36rpx 32rpx 20rpx;

			.S_biHead {
				width: 178rpx;
				height: 178rpx;
				margin-right: 24rpx;
				border-radius: 10rpx;
				background: #f0f0f0;
				box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, .16);
				overflow: hidden;
				float: left;
			}

			.S_biCan {
				overflow: hidden;
			}

			.S_biFee {
				height: 60rpx;
				line-height: 60rpx;
				color: #e9423e;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 20rpx;

				&>text {
					font-size: 44rpx;
				}
			}

			.S_biTip {
				height: 40rpx;
				line-height: 40rpx;
				color: #e9423e;
				font-size: 20rpx;
				margin-top: 10rpx;
				border-radius: 4rpx;
				background: #feeff2;
				display: inline-block;

				.yprice {
					margin-left: 0;
				}
			}

			.S_biRe {
				font-size: 30rpx;
				padding-right: 40rpx;
			}

			.S_biRemark {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
				margin-top: 10rpx;
			}
		}

		.S_bConfig {
			overflow: hidden;
			flex: 1;

			.S_bcCan {
				padding: 0 34rpx 146rpx;
			}

			.S_bcGroup {
				padding-top: 40rpx;
				position: relative;

				&:first-child {
					padding-top: 20rpx;
				}
			}

			.S_bcTit {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.S_bcChecks {
				padding-top: 8rpx;
			}

			.S_bcCheck {
				height: 42rpx;
				line-height: 42rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 26rpx;
				margin: 16rpx 16rpx 0 0;
				border-radius: 22rpx;
				background: #f5f5f5;
				display: inline-block;

				&.checked {
					color: #e9423e;
					background: #feeff2;
				}
			}

			.S_bcNums {
				height: 48rpx;
				position: absolute;
				top: 36rpx;
				right: -22rpx;
				display: flex;
			}

			.S_bcNum {
				width: 72rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #f6f7fb;
			}

			.S_bcMinus,
			.S_bcAdd {
				width: 72rpx;
				height: 48rpx;
				position: relative;
			}

			.S_bcMinus::before,
			.S_bcAdd::before,
			.S_bcAdd::after {
				content: "";
				width: 24rpx;
				height: 4rpx;
				border-radius: 4rpx;
				background: #333;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.S_bcAdd::after {
				width: 4rpx;
				height: 24rpx;
			}
		}

		.S_bBtns {
			height: 86rpx;
			color: #fff;
			font-weight: bold;
			padding: 20rpx 15rpx 0;
			border-top: 1px solid #f8f6f3;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			box-sizing: content-box;
			display: flex;
			justify-content: space-between;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.S_bbBtn1,
			.S_bbBtn2 {
				width: 294rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #c3ab7c;
				margin: 0 15rpx;

				&:active {
					opacity: .88;
				}
			}

			.S_bbBtn2 {
				background: #333;
			}
		}
	}

	// 浮窗按钮=====
	.shop .s_fixed {
		position: fixed;
		right: 32rpx;
		bottom: 100rpx;
		z-index: 53;
	}

	.shop .s_fixed .s_fBtn {
		width: 108rpx;
		height: 108rpx;
		margin-top: 22rpx;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 0 20rpx #dedede;
		position: relative;

		&:active {
			opacity: .92;
		}
	}

	.shop .s_fixed .s_fcIcon {
		width: 40rpx;
		height: 40rpx;
		padding-top: 18rpx;
		margin: 0 auto;
		box-sizing: content-box;
	}

	.s_fcNum {
		height: 32rpx;
		line-height: 32rpx;
		color: #fff;
		font-size: 24rpx;
		padding: 0 10rpx;
		border-radius: 16rpx;
		background: #e5675a;
		position: absolute;
		top: 0;
		right: 0;
	}

	.shop .s_fixed .s_fcTxt {
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		font-size: 24rpx;
	}

	// 固定条
	.into_shopcart {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 301;
		background-color: #fff;
		display: flex;
		align-items: center;

		&_box {
			padding: 14rpx 22rpx;
			display: flex;

			// 左边小图标
			.into_icon {
				display: flex;
				position: relative;
				width: 260rpx;

				.icon_store {
					width: 100rpx;
					margin-left: 30rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.store {
						width: 32rpx;
						height: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.icon_service {
					width: 100rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					position: absolute;
					right: 6rpx;
					top: 2rpx;

					.service {
						width: 34rpx;
						height: 32rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.contact_btn {
					width: 44rpx;
					height: 74rpx;
					margin-left: 46rpx;
				}

				button[plain] {
					border: 0 none;
				}
			}

			// 右边按钮
			.into_btn {
				width: 380rpx;
				height: 72rpx;
				border-radius: 10rpx;
				margin-left: 50rpx;
				display: flex;

				.join_cart {
					width: 226rpx;
					height: 100%;
					text-align: center;
					line-height: 72rpx;
					background-color: #C3AB7C;
					border-radius: 10rpx 0rpx 0rpx 10rpx;

					text {
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						color: #FFFFFF;
					}
				}

				.into_settlement {
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 72rpx;
					background-color: #C3AB7C;
					border-radius: 70rpx;

					text {
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.carticon {
		width: 250rpx;
		height: 72rpx;
		background: #F6F7FB;
		border-radius: 72rpx;
		line-height: 72rpx;
		font-size: 26rpx;

		image {
			width: 72rpx;
			height: 72rpx;
			float: left;
			margin-right: 15rpx;
		}
	}
</style>
